<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1px物理边框</title>
		<style>
			#demo{
				width: 200px;
				height: 200px;
				background-color: pink;
				border:1px solid black;
			}
			#demo2{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				border:1px solid black;
			}
			@media screen and (-webkit-min-device-pixel-ratio:2){
				#demo2{
					border:0.5px solid black;
				}
			}
			@media screen and (-webkit-min-device-pixel-ratio:3){
				#demo2{
					border:0.333px solid black;
				}
			}
		</style>
		<meta name="viewport" content=" width=device-width initial-scale=1.0 maximum-scale=1 minimum-scale=1 user-scalable=no viewport-fit=cover">
	</head>
	<body>
		<div id="demo"></div>
		<br>
		<br>
		<br>
		<div id="demo2"></div>
	</body>
</html>